<template>
  <view>
    <form @submit.prevent="onSubmit" @reset="formReset">
      <view>
        <view>序号:</view>
        <input type="text" name="itemNo" v-model="formData.itemNo" placeholder="请输入序号" />
      </view>
	  
	  <view>
	    <view>单号:</view>
	    <input type="text" name="formCode" v-model="formData.formCode" placeholder="请输入单号" />
	  </view>
	  
	  <view>
	    <view>状态:</view>
	    <input type="text" name="status" v-model="formData.status" placeholder="请输入状态" />
	  </view>
	  
	  <view>
	    <view>故障等级:</view>
	    <input type="text" name="faultLevel" v-model="formData.faultLevel" placeholder="请输入故障等级" />
	  </view>
	  
	  <!-- <view>
	    <view>专业:</view>
	    <input type="text" name="major" v-model="formData.major" placeholder="请输入专业" />
	  </view> -->
	  
	  <view>
	    <view>故障类型:</view>
	    <input type="text" name="faultType" v-model="formData.faultType" placeholder="请输入故障等级" />
	  </view>
	  
	  <view class="uni-title uni-common-pl" >专业：</view>
	  <view >
	  	<view class="uni-list-cell">
	  		<view class="uni-list-cell-left">
	  					
	  		</view>
	  		<view class="uni-list-cell-db">
	  			<picker @change="bindPickerChange1" :value="index1" :range="array1" v-model="formData.major" name="major">
	  				<view class="uni-input">{{array1[index1]}}</view>
	  			</picker>
	  		</view>
	  	</view>
	  </view>
	  
	  <!-- <view>
	    <view>线路:</view>
	    <input type="text" name="line" v-model="formData.line" placeholder="请输入线路" />
	  </view> -->
	  
	  <view class="uni-title uni-common-pl" >线路：</view>
	  <view class="uni-list">
	  	<view class="uni-list-cell">
	  		<view class="uni-list-cell-left">
	  					
	  		</view>
	  		<view class="uni-list-cell-db">
	  			<picker @change="bindPickerChange2" :value="index2" :range="array2" v-model="formData.line" name="line">
	  				<view class="uni-input">{{array2[index2]}}</view>
	  			</picker>
	  		</view>
	  	</view>
	  </view>
	  
	  <view>
	    <view>上/下行:</view>
	    <input type="text" name="upDownLine" v-model="formData.upDownLine" placeholder="请输入上/下行" />
	  </view>
	  
	  <view>
	    <view>区间（始）:</view>
	    <input type="text" name="segmentBeginning" v-model="formData.segmentBeginning" placeholder="请输入区间(始)" />
	  </view>
	  
	  <view>
	    <view>区间（终）:</view>
	    <input type="text" name="segmentEnd" v-model="formData.segmentEnd" placeholder="请输入区间(终)" />
	  </view>
	  
	  <!-- <view>
	    <view>异常发生时间:</view>
	    <input type="text" name="abnormalOccurrenceTime" v-model="formData.abnormalOccurrenceTime" placeholder="请输入异常发生时间" />
	  </view> -->
	  
	  <view class="uni-title uni-common-pl" >异常发生时间</view>
	    		<view class="uni-list">
	    			<view class="uni-list-cell">
	    				<view class="uni-list-cell-left">
	    					
	    				</view>
	    				<view class="uni-list-cell-db">
	    					<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
	    						<view class="uni-input">{{date1}}</view>
	    					</picker>
	    				</view>
	    			</view>
	    		</view>
	  
	  <view>
	    <view>设备大类:</view>
	    <input type="text" name="deviceCategory" v-model="formData.deviceCategory" placeholder="请输入设备大类" />
	  </view>
	  
	  <view>
	    <view>设备功能分类:</view>
	    <input type="text" name="deviceFunctionClassification" v-model="formData.deviceFunctionClassification" placeholder="请输入序号" />
	  </view>
	  
	  <view>
	    <view>部件名称:</view>
	    <input type="text" name="componentName" v-model="formData.componentName" placeholder="请输入部件名称" />
	  </view>
	  
	  <view>
	    <view>故障详情:</view>
	    <input type="text" name="faultDetails" v-model="formData.faultDetails" placeholder="请输入故障详情" />
	  </view>
	  
	  <view>
	    <view class="uni-title uni-common-pl" style="margin: 10px">故障照片</view>
	          
	           
	    	   <view class="example-body">
	    	   				<uni-file-picker limit="9" file-mediatype="photo" ></uni-file-picker>
	    	   	</view>
	  </view>
	  
	  <view>
	    <view>是否影响行车:</view>
	    <input type="text" name="affectNormalRunning" v-model="formData.affectNormalRunning" placeholder="请输入是否影响行车" />
	  </view>
	  
	  <view>
	    <view>申报人:</view>
	    <input type="text" name="declareBy" v-model="formData.declareBy" placeholder="请输入申报人" />
	  </view>
	  
	  <!-- <view>
	    <view>申报时间:</view>
	    <input type="text" name="declareByDate" v-model="formData.declareByDate" placeholder="请输入申报时间" />
	  </view> -->
	  
	  <view class="uni-title uni-common-pl" >申报时间</view>
	        <view class="uni-list">
	        	<view class="uni-list-cell">
	        		<view class="uni-list-cell-left">
	        			
	        		</view>
	        		<view class="uni-list-cell-db">
	        			<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
	        				<view class="uni-input">{{date2}}</view>
	        			</picker>
	        		</view>
	        	</view>
	        </view>
	  
	  <view>
	    <view>当前处理人:</view>
	    <input type="text" name="processBy" v-model="formData.processBy" placeholder="请输入当前处理人" />
	  </view>
	  
	  <view>
	    <view>处理部门:</view>
	    <input type="text" name="processByOrg" v-model="formData.processByOrg" placeholder="请输入处理部门" />
	  </view>
		          <button form-type="submit" type="primary" >提交表单</button>
		          <button form-type="reset">重置表单</button>
		  
        
    </form>
  </view>
</template>

<script>
import axios from "axios"
import { title } from "process";
export default {
  data() {
	  const currentDate = this.getDate({
	              format: true
	          })
    return {
	  array1: ['变电','工务','通信','信号','接触轨'],
	  index1: 0,
	  array2: ['十七号线','十三号线'],
	  index2: 0,
	  date1:currentDate,
	date2:currentDate,
      formData: {
		itemNo:"",
		forceCode:'',
        status: "",
        faultLevel: "",
        faultType: "",
        major: "",
        line: "",
        upDownLine: "",
        sgementBeginning: "",
        segmentEnd: "",
        abnormalOccurrenceTime: "",
        deviceCategory: "",
        deviceFunctionClassification: "",
        componentName: "",
        faultDetails: "",
        faultPhotos: "",
        affectNormalRunning: "",
        declareBy: "",
        declareByDate: "",
        processBy: "",
        processByOrg: "",
      },
      obj: null
  	  };
    },
	computed: {
	        startDate() {
	            return this.getDate('start');
	        },
	        endDate() {
	            return this.getDate('end');
	        }
	    },
  methods: {
	  // 获取上传状态
	select(e){
	  	console.log('选择文件：',e)
	},
	// 获取上传进度
	progress(e){
	  	console.log('上传进度：',e)
	},
	  			
	// 上传成功
	success(e){
	  	console.log('上传成功')
	},
	  			
	// 上传失败
	fail(e){
	  	console.log('上传失败：',e)
	},
	  bindPickerChange1: function(e) {
	              console.log('picker发送选择改变，携带值为', e.detail.value)
	              this.index1 = e.detail.value
				  this.formData.major=this.index1
	          },
	  bindPickerChange2: function(e) {
	             console.log('picker发送选择改变，携带值为', e.detail.value)
	             this.index2 = e.detail.value
				 this.formData.line=this.index2
	         },
	bindDateChange1: function(e) {
	            this.date1 = e.detail.value
				this.formData.abnormalOccurrenceTime=this.date1
	        },
	bindDateChange2: function(e) {
	            this.date2 = e.detail.value
				this.formData.declareByDate=this.date2
	        },
     onSubmit(e) {
		 
     e.preventDefault(); // 防止默认表单提交
     console.log(this.formData); // 从'message'对象中访问表单数据
     this.obj = this.formData; // 将表单数据分配给'obj'
     uni.setStorageSync("message", this.obj); // 将表单数据保存在本地存储中
     console.log("Sending data to server:", this.formData);
	  axios.post("http://localhost:82/faultRequestRepair/management",this.formData)
	  .then((data)=>{
		  console.log(data)
	  }).catch((err)=>{
		  console.log(err)
	  })
	  
    },
	 getDate(type) {
	             const date = new Date();
	             let year = date.getFullYear();
	             let month = date.getMonth() + 1;
	             let day = date.getDate();
	 
	             if (type === 'start') {
	                 year = year - 60;
	             } else if (type === 'end') {
	                 year = year + 2;
	             }
	             month = month > 9 ? month : '0' + month;
	             day = day > 9 ? day : '0' + day;
	             return `${year}-${month}-${day}`;
	         }
	
  }
}
</script>

<style lang="scss">
  input, textarea { border: 1px solid #eee; }
  form {
    padding: 20rpx;
  }
  view {
    margin-bottom: 20rpx;
  }
 //  .uni-list {
	
 //    margin: 10px;
 //    background-color: darkgray;
 //    height: 1cm;
 //    border: 1px;
 //    box-sizing: border-box;
	
 //  }
  .example-body{
	  margin: 10px;
	  height: 1cm;
	  border: 1px;
	  box-sizing: border-box;
	  
  }
</style>